package com.example.h4

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.h4.R

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TopicGridAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    TopicGrid()
                }
            }
        }
    }
}

// --- 1. 数据模型 ---
data class Topic(
    val name: String,
    val availableCourses: Int,
    @DrawableRes val imageRes: Int
)

val topics = listOf(
    Topic("Architecture", 58, R.drawable.architecture),
    Topic("Automotive", 0, R.drawable.automotive),
    Topic("Biology", 0, R.drawable.biology),
    Topic("Business", 78, R.drawable.business),
    Topic("Crafts", 121, R.drawable.crafts),
    Topic("Culinary", 118, R.drawable.culinary),
    Topic("Design", 423, R.drawable.design),
    Topic("Drawing", 326, R.drawable.drawing),
    Topic("Ecology", 0, R.drawable.ecology),
    Topic("Engineering", 0, R.drawable.engineering),
    Topic("Fashion", 92, R.drawable.fashion),
    Topic("Film", 165, R.drawable.film),
    Topic("Finance", 0, R.drawable.finance),
    Topic("Gaming", 164, R.drawable.gaming),
    Topic("Geology", 0, R.drawable.geology),
    Topic("History", 0, R.drawable.history),
    Topic("Journalism", 0, R.drawable.journalism),
    Topic("Law", 0, R.drawable.law),
    Topic("Lifestyle", 305, R.drawable.lifestyle),
    Topic("Music", 212, R.drawable.music),
    Topic("Painting", 172, R.drawable.painting),
    Topic("Photography", 321, R.drawable.photography),
    Topic("Physics", 0, R.drawable.physics),
    Topic("Tech", 118, R.drawable.tech)
)

// --- 2. UI 组件实现 ---

@Composable
fun TopicGrid(modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        modifier = modifier.padding(8.dp)
    ) {
        items(topics) { topic ->
            TopicCard(topic)
        }
    }
}

@Composable
fun TopicCard(topic: Topic, modifier: Modifier = Modifier) {
    Card(
        shape = RoundedCornerShape(8.dp),
        modifier = modifier.height(68.dp)
    ) {
        Row(modifier = Modifier.fillMaxSize()) {
            Image(
                painter = painterResource(id = topic.imageRes),
                contentDescription = topic.name,
                modifier = Modifier.size(68.dp),
                contentScale = ContentScale.Crop
            )

            Column(
                modifier = Modifier.padding(start = 16.dp, top = 16.dp, end = 16.dp)
            ) {
                Text(
                    text = topic.name,
                    style = MaterialTheme.typography.bodyMedium,
                    modifier = Modifier.padding(bottom = 8.dp)
                )

                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_grain),
                        contentDescription = null,
                        modifier = Modifier
                            .padding(end = 8.dp)
                            .size(16.dp)
                    )
                    Text(
                        text = topic.availableCourses.toString(),
                        style = MaterialTheme.typography.labelMedium
                    )
                }
            }
        }
    }
}

// --- 3. 预览 ---
@Preview(showBackground = true)
@Composable
fun TopicCardPreview() {
    TopicGridAppTheme {
        val sampleTopic = Topic("Photography", 321, R.drawable.ic_grain)
        TopicCard(topic = sampleTopic)
    }
}

// 简单的主题包裹，防止复制报错
@Composable
fun TopicGridAppTheme(content: @Composable () -> Unit) {
    MaterialTheme(content = content)
}